<template>

  <div class="loginPW">
    <div class="input">
      <el-form ref="loginFromRef" :rules="roules" :model="modifyPhoneFrom">
        <el-form-item class="phone" prop="mobile">
          <el-input class="deepInput" v-model="modifyPhoneFrom.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="password" class="message">
          <el-input class="deepInput" type="password" show-password v-model="modifyPhoneFrom.password"
            placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="button">
      <p class="forget"><span style="color: gray;">忘记密码?</span></p>

      <div class="login-btn">
        <el-button type="danger" @click="login(loginFromRef)">登 录</el-button>
      </div>
      <div class="agreement">
        <div>
          <el-checkbox class="deepcheck" v-model="agreed">登录即代表你同意<span>《鹿线AI用户协议》</span></el-checkbox>
        </div>
      </div>
    </div>
  </div>

</template>
<script lang='ts' setup>
import { ref, reactive,defineEmits } from 'vue'
import { loginPwd} from "@/api/login"
import type { FormInstance, FormRules, ElNotification } from 'element-plus'
import { userInfo } from '@/hooks/user'

// vue3 和 vue2的区别？
// vue2  ref  this.$refs.xxxx
//vue3要获取dom得先创建初始化一次
// vue3 let modifyPhoneForm = ref(null)
//表单主体
const loginFromRef = ref<FormInstance>()
//绑定非表单的数据
const modifyPhoneFrom = reactive({
 mobile:'',
  password:'' 
})
//验证规则
const roules = reactive<FormRules>({
  mobile:[
  {required:true,message:'手机号不能为空',trigger:'blur'},
  {pattern:/^1[3-9]\d{9}$/,message:'手机号格式不正确',trigger:'blur'}
  ],
  password:[
    { required: true, message: '密码不能为空', trigger: 'blur' },
    // { pattern: /.{6} / , message: 'Length should be 3 to 5', trigger: 'blur' },
    // {pattern:/^(?:[a - z0 - 9]{ 6, 18}$|^[A-Z0-9]{6,18}$)/,message:'请输入6-18位包含字母和数字的密码',trigger:'blur'}
    {pattern:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/,message:'请输入6-18位包含字母和数字的密码',trigger:'blur'}
  ]
})

// 协议
const agreed = ref<boolean>(false)


//登录成功关闭
const emit = defineEmits(['close'])
const login =async (formEl: FormInstance|undefined)=>{
  // console.log('登录');
  // 是否同意协议
  if (!agreed.value) {
    ElNotification.warning('请同意用户协议！')
    return
  }
  if (!formEl) return console.log('form表单未找到');
  

  // 登录  通过验证才能允许去登录

  await formEl.validate(async (valid,fields) => {
    // valid 返回值表示校验 状态
    if(valid){
      let res = await loginPwd(modifyPhoneFrom.mobile,modifyPhoneFrom.password )
      if(res.code === 0 ){
        // 登录成功
        ElNotification({
          showClose: true,
          message: '登录成功',
          type: 'success'
        })
        let { token } = res.data
        userInfo(token)
        emit('close')
      }else{
        // 登录失败
        ElNotification({
          showClose: true,
          message: res.errorMessage,
          type: 'error'
        })
      }
    
    }
 
  })

}

  // defineProps({
  //   msg: {
  //     type: String,
  //     default: ''
  //   }
  // })
</script>
<style scoped lang='scss'>
.loginPW {
  width: 354px;
    .input {
        // margin: 0 48px;
    
        .phone {
          position: relative;
          display: flex;
          border-radius: 11px;
          align-items: center;
          margin: 30px 0;
          background: rgba(250, 240, 240, 0.8);
        }
    
    
        .message {
          position: relative;
          border-radius: 11px;
          display: flex;
          align-items: center;
          background: rgba(250, 240, 240, 0.8);
        }
      }
    
      .button {
        // margin: 0 48px;
    
        .forget {
          display: flex;
          cursor: pointer;
          align-items: center;
          justify-content: right;
          margin-bottom: 15px;
    
          p {
            font-size: 15px;
            color: #232323;
    
          }
        }
    
        .login-btn {
          height: 52px;
          margin-bottom: 20px;
          border-radius: 11px;
    
          .el-button {
            width: 100%;
            height: 52px;
            font-size: 23px;
            color: #FFFFFF;
            background: #C90000;
          }
        }
    
        .agreement {
          display: flex;
          align-items: center;
          justify-content: center;
    
          div {
            display: flex;
            align-items: center;
            justify-content: center;
            

    
            .el-checkbox {
              font-weight: 400;
              font-size: 14px;
              color: #232323;
    
              span {
                cursor: pointer;
                color: #C90000;
              }
            }
          }
    
        }
      }
}
::v-deep .is-focus {
  box-shadow: 0 0 0 1px #c90000 inset;
}
</style>
